<template>
  <el-dialog
    :title="!dataForm.id ? '新增发货信息' : '修改发货信息'"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="600px"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="120px"
    >
    <el-form-item label="联系人：" prop="contacts">
        <span>{{dataForm.contacts}}</span>
      </el-form-item>
      <el-form-item label="联系方式：" prop="contactNumber">
        <span>{{dataForm.contactNumber}}</span>
      </el-form-item>
      <el-form-item label="收货地址：" prop="address">
        <span>{{dataForm.address}}</span>
      </el-form-item>

      <el-form-item label="物流类型：" prop="deliveryId">
        <el-select
          v-model="dataForm.deliveryId"
          filterable
          placeholder="请选择物流类型"
          clearable
          size="small"
          class="margin-left-xs"
          style="width:100%"
        >
          <el-option
            v-for="dict in deliveryList"
            :key="dict.id"
            :label="dict.deliveryName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="物流单号：" prop="deliveryNo">
        <el-input placeholder="请输入快递单号" v-model="dataForm.deliveryNo"></el-input>
      </el-form-item>
      
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {getDeliveryPageList} from '@/api/shop_config/delivery';
import {getOrderTypeDelivery, putObj, addObj} from '@/api/shop_order/order_delivery';

export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
      deliveryList:[],
      dataForm:{
        orderId:'',
        address:'',
        contacts:'',
        contactNumber:'',
        deliveryId:'',
        deliveryNo:''
      },
      dataRule: {
        deliveryId: [
          { required: true, message: "物流类型不能为空", trigger: "blur" },
        ],
        deliveryNo: [
          { required: true, message: "物流单号不能为空", trigger: "blur" },
        ],
      },
      canSubmit:false
    }
  },
  methods:{

    /**
     * 初始化
     */
    init(orderId, address, contacts, contactNumber, deliveryOrderType){
      this.canSubmit = true
      this.dataForm.address = address
      this.dataForm.contacts = contacts
      this.dataForm.contactNumber = contactNumber
      this.dataForm.orderId = orderId
      this.dataForm.deliveryOrderType = deliveryOrderType

      this.getDeliveryPageList()

      if(orderId){
        getOrderTypeDelivery({
          orderId: orderId,
          deliveryOrderType: deliveryOrderType
        }).then(res=>{
          if(res.data.data){
            this.dataForm = {...this.dataForm, ...res.data.data}
          }
        })
      }
    },

    /**
     * 获取所有物流
     */
    getDeliveryPageList(){
      getDeliveryPageList().then(res=>{
        this.deliveryList = res.data.data
      })
    },

    /**
     * 提交
     */
    dataFormSubmit(){
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          let requestData = {
            id: this.dataForm.id,
            orderId: this.dataForm.orderId,
            deliveryId: this.dataForm.deliveryId,
            deliveryNo: this.dataForm.deliveryNo,
            deliveryOrderType: this.dataForm.deliveryOrderType
          }

          if (requestData.id) {
            putObj(requestData)
              .then((data) => {
                this.$notify.success("修改成功");
                this.$emit("refreshDataList");
                this.closeDialog()
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            addObj(requestData)
              .then((data) => {
                this.$notify.success("添加成功");
                this.$emit("refreshDataList");
                this.closeDialog()
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },

    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },

  }
}
</script>